<!-- 从 品牌管理_时间过滤器 复制代码-->
<!-- 目标: 总价和均价显示 -->
<!-- 从品牌管理—时间过滤器中复制代码 -->
<!-- s目标: 处理时间 需要下载moment模块 -->
<template>
  <div class="container">
    <!-- 顶部框模块 -->
    <div class="form-group">
      <div class="input-group">
        <h4>品牌管理</h4>
      </div>
    </div>

    <!-- 数据表格 -->
    <table class="table table-bordered table-hover mt-2">
      <thead>
        <tr>
          <th>编号</th>
          <th>资产名称</th>
          <th>价格</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <!-- 如果价格超过100，就有red这个类 -->
          <td :style="{ color: item.price > 100 ? 'red' : '' }">
            {{ item.price }}
          </td>
          <td>{{ item.time | formatTime }}</td>
          <td><a href="#" @click.prevent="delFn(item.id)">删除</a></td>
        </tr>

        <!-- 不用循环，展示总价 和 平均价 -->
        <tr style="background-color: #eee" v-show="list.length > 0">
          <td>统计:</td>
          <td colspan="2">总价钱为:{{ totlePrice }}</td>
          <td colspan="2">平均价:{{ avgPrice }}</td>
        </tr>
      </tbody>
      <!-- 底部的提示消息 -->

      <tfoot v-show="list.length === 0">
        <tr>
          <td colspan="5" style="text-align: center">暂无数据</td>
        </tr>
      </tfoot>
    </table>

    <!-- 添加资产 -->
    <form class="form-inline">
      <div class="form-group">
        <div class="input-group">
          <input
            type="text"
            class="form-control"
            placeholder="资产名称"
            v-model="oname"
          />
        </div>
      </div>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <div class="form-group">
        <div class="input-group">
          <input
            type="text"
            class="form-control"
            placeholder="价格"
            v-model.number="oprice"
          />
        </div>
      </div>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <!-- 阻止表单提交 -->
      <button class="btn btn-primary" @click.prevent="addFn">添加资产</button>
    </form>
  </div>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      oname: "",
      oprice: "",
      list: [
        {
          id: 100,
          name: "外套",
          price: 99,
          time: new Date("2010-08-12"),
        },
        {
          id: 101,
          name: "裤子",
          price: 34,
          time: new Date("2013-09-01"),
        },
        {
          id: 102,
          name: "鞋",
          price: 25.4,
          time: new Date("2018-11-22"),
        },
        {
          id: 103,
          name: "头发",
          price: 199,
          time: new Date("2020-12-12"),
        },
      ],
    };
  },
  methods: {
    addFn() {
      if (this.oname.trim().length === 0 || this.oprice <= 0) {
        return alert("请输入完整信息");
      }
      this.list.unshift({
        id: +new Date(),
        name: this.oname,
        price: this.oprice,
        time: new Date(),
      });
    },
    delFn(id) {
      let index = this.list.findIndex((obj) => (obj.id = id));
      this.list.splice(index, 1);
    },
  },
  filters: {
    formatTime(time) {
      return moment(time).format("YYYY-MM-DD");
    },
  },
  computed: {
    totlePrice() {
      return this.list.reduce((prev, item) => prev + item.price, 0);
    },
    avgPrice() {
      return (this.totlePrice / this.list.length).toFixed(2) * 1;
    },
  },
};
</script>

<style scoped>
.red {
  color: red;
}
</style>
